<template>
    <v-list
        :key="render_trigger"
        density="compact"
    >
        <MenuItem
            v-for="(children, index) in domList"
            :dom="children"
            :canShowDeleteIcon="true"
            :key="index"
            @delete-dom="deleteDom"
        ></MenuItem>
    </v-list>
    <v-dialog
        v-model="delDialog"
        persistent
        width="auto"
    >
        <v-card style="width: 300px">
            <v-icon
                @click="delDialog = false"
                style="position: absolute; right: 0%"
                >mdi-close</v-icon
            >
            <v-card-text style="padding-top: 15%">
                Confirm to delete this {{ this.id }} ?</v-card-text
            ><v-card-actions>
                <div style="position: absolute; right: 0%">
                    <v-btn
                        @click="delConfirm"
                        style="color: cadetblue"
                        >confirm</v-btn
                    >
                    <v-btn @click="delDialog = false">close</v-btn>
                </div>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>
import MenuItem from './components/MenuItem.vue'
import { globalDomTree, useDesignStore } from '@/stores/design'
export default {
    components: {
        MenuItem
    },
    data() {
        return {
            domList: globalDomTree.children,
            delDialog: false,
            id: '',
            designStore: useDesignStore(),
            render_trigger: true
        }
    },
    methods: {
        deleteDom(id) {
            this.delDialog = true
            this.id = id
        },
        delConfirm() {
            this.designStore.removeDom(this.id)
            this.delDialog = false
        }
    },
    computed: {
        trigger() {
            return this.designStore.trigger.elMenu
        }
    },
    watch: {
        trigger() {
            this.domList = globalDomTree.children
            this.render_trigger = !this.render_trigger
            this.$forceUpdate()
        }
    }
}
</script>
